<template>
  <div>
    <!-- 面包屑 -->
    <miAn-xie :betGao="betGao"></miAn-xie>
    <el-card>
      <!-- 搜索 -->
      <el-row>
        <el-col :span="10">
          <el-input
            v-model="query.query"
            placeholder="请输入内容"
            class="input-with-select"
          >
            <el-button
              slot="append"
              icon="el-icon-search"
              @click="sou"
            ></el-button>
          </el-input>
        </el-col>
      </el-row>

      <!-- 表格 -->
      <el-table class="users_table" :data="list" :border="true">
        <el-table-column label="#" type="index"></el-table-column>
        <el-table-column label="订单编号" prop="order_number"></el-table-column>
        <el-table-column label="订单价格" prop="order_price"></el-table-column>
        <el-table-column label="是否付款">
          <template slot-scope="scope">
            <el-tag type="danger" v-if="scope.row.pay_status == '0'"
              >未付款</el-tag
            >
            <el-tag type="success" v-else>已付款</el-tag>
          </template>
        </el-table-column>
        <el-table-column label="是否发货" prop="is_send"> </el-table-column>
        <el-table-column label="下单时间">
          <template slot-scope="scope">
            {{ scope.row.update_time | time }}
          </template>
        </el-table-column>
        <el-table-column label="操作" width="140px">
          <template slot-scope="scope">
            <el-button
              type="primary"
              size="mini"
              icon="el-icon-edit"
              circle
              @click="diZhi(scope.row)"
            >
            </el-button>
            <el-button
              type="success"
              size="mini"
              icon="el-icon-location"
              @click="cxxC"
              circle
            ></el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="query.pagenum"
        :page-sizes="[3, 6, 10, 20]"
        :page-size="query.pagesize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      >
      </el-pagination>
      <!-- 编辑 -->
      <el-dialog title="收货地址" :visible.sync="dialogVi">
        <el-form :model="ruleFormS">
          <el-form-item label="市区/县" :label-width="formLabelWidth">
            <template>
              <el-cascader
                v-model="ruleFormS.name"
                :options="options"
                :props="axa"
                clearable
              ></el-cascader>
            </template>
          </el-form-item>
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="dialogVi = false">取 消</el-button>
          <el-button type="primary" @click="dialogVi = false">确 定</el-button>
        </div>
      </el-dialog>
      <!-- 查询 -->
      <el-dialog title="查询" :visible.sync="dialogVisible" width="50%">
        <el-timeline :reverse="reverse">
          <el-timeline-item
            v-for="(activity, index) in listA"
            :key="index"
            :timestamp="activity.time"
          >
            {{ activity.context }}
          </el-timeline-item>
        </el-timeline>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogVisible = false">取 消</el-button>
          <el-button type="primary" @click="dialogVisible = false"
            >确 定</el-button
          >
        </span>
      </el-dialog>
    </el-card>
  </div>
</template>
<script>
import { chs } from "./diqu";
import Co from "./kuaidi";
console.log(Co);
import { orders_orders } from "@/http/orders/orders";
export default {
  data() {
    return {
      betGao: [
        {
          path: "/home",
          title: "首页",
        },
        {
          path: "/orders",
          title: "订单管理",
        },
        {
          path: "/orders",
          title: "订单列表",
        },
      ],

      query: {
        query: "",
        pagenum: 1,
        pagesize: 3,
      },
      total: 0,

      list: [],
      dialogVi: false,
      ruleFormS: {
        name: "",
        names: "",
      },

      options: chs,
      axa: {
        label: "value",
        value: "code",
        checkStrictly: true,
      },
      formLabelWidth: "120px",
      listA: Co.data,
      dialogVisible: false,
      reverse: false,
    };
  },
  mounted() {
    this.orders();
  },
  methods: {
    // 列表数据
    async orders() {
      let res = await orders_orders(this.query);
      console.log(res);
      this.list = res.data.goods;
      this.total = res.data.total;
    },
    // 每页条数
    handleSizeChange(val) {
      //   console.log(`每页 ${val} 条`);
      this.query.pagesize = val;
      this.orders();
    },
    // 当前每页
    handleCurrentChange(val) {
      //   console.log(`当前页: ${val}`);
      this.query.pagenum = val;
      this.orders();
    },
    // 搜索
    sou() {
      this.query.pagenum=1
      this.orders();
    },
    // 添加
    diZhi(row) {
      this.dialogVi = true;
    },
    // 确认修改
    submitForm() {},
    // 查询
    async cxxC() {
      this.dialogVisible = true;
    },
  },
};
</script>
<style lang="scss" >
.el-table {
  margin: 20px 0;
}
.el-cascader-panel {
  height: 400px !important;
}
</style>